.neo-chip {
    align-items    : var(--chip-align-items);
    border         : var(--chip-border);
    border-radius  : var(--chip-border-radius);
    // display will get handled on component level => either flex or inline-flex
    flex-direction : row;
    height         : var(--chip-height);
    justify-content: var(--chip-justify-content);
    transition     : border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

    &:focus {
        border-color: var(--chip-border-color-focus);
        outline     : 0;
    }

    .neo-chip-close-button {
        color     : var(--chip-close-button-color);
        cursor    : pointer;
        margin    : 0 calc(15px / 2);
        transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);

        &:hover {
            color: var(--chip-close-button-color-hover);
        }
    }

    .neo-chip-glyph {
        color         : var(--chip-glyph-color);
        margin        : 0 calc(15px / 2);
        pointer-events: none;
    }

    .neo-chip-text {
        color         : var(--chip-text-color);
        flex          : 1;
        font-size     : var(--chip-text-font-size);
        pointer-events: none;
        text-align    : var(--chip-text-align);
    }
}
